<template>
  <div class="setPage">
    <div class="setPage__line">
      <div class="setPage__line--title">商品基金</div>
      <div>
        <el-radio-group v-model="form.radio">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="2">关闭</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="setPage__line">
      <div class="setPage__line--title">基金设置</div>
      <div class="setPage__line--con">
        <p>每个商品可获得基金</p>
        <el-input
          min="0"
          max="100"
          type="number"
          v-model="form.input"
          style="width: 200px"
        >
          <el-button slot="append">%</el-button>
        </el-input>
      </div>
    </div>

    <div class="setPage__line newSet">
      <div class="setPage__line--title">页面背景</div>
      <el-upload
        class="setPage__line--upload"
        :auto-upload="false"
        :on-change="uploadProductImg"
        action
        :show-file-list="false"
      >
        <img v-if="form.img" :src="form.img" />
        <i class="el-icon-plus" v-else></i>
      </el-upload>
      <div class="setPage__line--tip">
        <el-upload
          :auto-upload="false"
          :on-change="uploadProductImg"
          action
          :show-file-list="false"
        >
          <p>上传样式</p>
        </el-upload>
        <div>建议尺寸：750 * 1350px</div>
      </div>
    </div>

    <div class="setPage__line popTip">
      <div class="setPage__line--title">购买成功获取基金弹窗</div>
    </div>
    <div style="display: flex">
      <div class="setPage__baseUpload">
        <el-upload
          class="setPage__baseUpload--inUpload"
          :auto-upload="false"
          :on-change="uploadProBaseductImg"
          action
          :show-file-list="false"
        >
          <img v-if="form.baseImg" :src="form.baseImg" />
          <i class="el-icon-plus" v-else></i>
          <div class="closeStyle">关闭按钮</div>
          <div class="textStyle">字段位置</div>
          <div class="btnStyle">按钮区域</div>
        </el-upload>
      </div>

      <div class="setTip">
        <div class="setPage__line--tip" style="height: 40px; margin-top: 20px">
          <el-upload
            :auto-upload="false"
            :on-change="uploadProBaseductImg"
            action
            :show-file-list="false"
          >
            <p>上传样式</p>
          </el-upload>
          <div>建议尺寸：750 * 1350px</div>
        </div>
        <div class="setTip__tipTwo">
          设计图片上传时，请将点击按钮尽量对其按钮位置，并在字段位置留空
        </div>
      </div>
    </div>
    <div style="width: 88px; margin: 20px 10px">
      <div class="pageBotton" @click="saveSubmit">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { upLoad } from "@/api/index";
import { saveCommoditySet } from "@/api/commodity/commodity";

@Component({
  components: {},
})
export default class ManageIndex extends Vue {
  name = "setCommodity";

  form = {
    id: null,
    radio: 1,
    input: 0,
    img: "",
    baseImg: "",
  };

  mounted() {
    this.init();
  }

  /**
   * 初始化信息
   */
  init() {
    const shopRecInfo = this.$store.state.global.recover;
    this.form.id = shopRecInfo.id;
    this.form.radio = shopRecInfo.goodsFundState ? 1 : 2;
    this.form.input = shopRecInfo.fundQuota;
    this.form.img = shopRecInfo.pageBgImg;
    this.form.baseImg = shopRecInfo.buyBgImg;
  }

  async uploadProBaseductImg(file) {
    try {
      this.form.baseImg = await this.upLoadFile(file);
    } catch (error) {
      console.log(error);
    }
  }

  async uploadProductImg(file) {
    try {
      this.form.img = await this.upLoadFile(file);
    } catch (error) {
      console.log(error);
    }
  }

  async upLoadFile(file) {
    try {
      const whiteList = ["image/jpeg", "image/jpg", "image/png", "image/gif"];
      const isLt2M = file.size < 2 * 1024 * 1024;
      if (!whiteList.includes(file.raw.type)) {
        this.$message.error("上传文件只能是 GIF、JPG或PNG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return;
      }
      const res = await upLoad({
        file: file.raw,
      });
      return res.data;
    } catch (error) {
      console.log(error);
    }
  }

  /**
   * 提交保存
   */
  async saveSubmit() {
    if (this.form.input < 0 || this.form.input === 0) {
      this.$message.error("请正确填写可获取基金数额");
      return;
    }
    const param = {
      buyBgImg: this.form.baseImg,
      fundQuota: this.form.input,
      goodsFundState: this.form.radio === 1 ? true : false,
      pageBgImg: this.form.img,
      id: this.form.id,
    };
    saveCommoditySet(param)
      .then((res) => {
        console.log(res);
        this.$store.dispatch("global/getShopInfo");
        this.$message.success("保存成功");
      })
      .catch((error) => {
        this.$message.error(error);
      });
  }
}
</script>

<style lang="scss" scoped>
@include b(setPage) {
  @include e(line) {
    display: flex;
    padding-left: 10px;
    height: 60px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;

    @include m(title) {
      margin-right: 40px;
      font-size: 14px;
      font-weight: bold;
      color: #586884;
    }

    @include m(con) {
      display: flex;
      align-items: center;
      p {
        margin-right: 20px;
        color: #586884;
      }
    }

    @include m(upload) {
      width: 160px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eef1f6;

      img {
        width: 160px;
        height: 200px;
      }
    }

    @include m(tip) {
      display: flex;
      margin: 80px 0px 0px 40px;
      p {
        color: #2e99f3;
        font-size: 14px;
        margin-right: 30px;
        cursor: pointer;
      }
      div {
        color: #cfcfcf;
        font-size: 14px;
      }
    }

    @include e(baseUpload) {
      border: 2px dashed #e6e6e6;
      width: 290px;
      height: 320px;
      border-radius: 10px;
      padding: 10px;
      margin-left: 100px;
      display: flex;
      justify-content: center;
      align-items: center;

      @include m(inUpload) {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        position: relative;

        img {
          width: 280px;
          height: 310px;
        }

        .closeStyle {
          position: absolute;
          right: 2px;
          top: 2px;
          padding: 10px 10px;
          background-color: rgba(0, 0, 0, 0.4);
          color: white;
          font-size: 12px;
        }

        .textStyle {
          position: absolute;
          right: 50px;
          top: 90px;
          padding: 20px 50px;
          background-color: rgba(0, 0, 0, 0.4);
          color: white;
          font-size: 12px;
        }

        .btnStyle {
          position: absolute;
          right: 30px;
          bottom: 12px;
          padding: 10px 50px;
          background-color: rgba(0, 0, 0, 0.4);
          color: white;
          font-size: 12px;
          height: 46px;
          width: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

.newSet {
  margin-top: 30px;
  display: flex;
  border: none;
  height: 100%;
  align-items: flex-start;
}

.popTip {
  border: none;
  margin-top: 30px;
}

.setTip {
  display: flex;
  flex-wrap: wrap;
  height: 60px;

  &__tipTwo {
    color: #ff3b4b;
    font-size: 14px;
    margin-left: 40px;
  }
}

.pageBotton {
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: bold;
  margin-right: 20px;
  cursor: pointer;
  background-color: #2e99f3;
  color: white;
}
</style>
